/*-----------top------------*/
var top_shop = document.getElementById("top_shop"); //购物车节点
var logo_words = document.getElementById("logo_words"); //购物车浮动节点
top_shop.onmouseenter = function() {
	top_shop.className = "top_shop active";
	logo_words.className = "logo_words active";
	logo_words.style.height = 0;
	animate(logo_words,{height:97},0.01);
}
top_shop.onmouseleave = function() {
		top_shop.className = "top_shop";
		logo_words.className = "logo_words";
	}
	/*-----------logo------------*/
	//搜索框效果
var txt = document.getElementById("txt"); //搜索框节点
var logo_form = document.getElementById("logo_form"); //表单节点
var logo_list = document.getElementById("logo_list"); //装a节点的大盒子
var logo_goods = document.getElementById("logo_goods"); //搜索框里的浮动节点
var as = document.querySelectorAll(".logo_right .logo_right_list a"); //表单里面的所有a节点
txt.onfocus = function() { //搜索框获焦事件
	logo_form.className = "logo_f active";
	logo_list.className = "logo_right_list active";
	logo_goods.className = "logo_right_goods active";
	for(var i = 0, len = as.length; i < len; i++) {
		as[i].onmouseenter = function() {
			for(var j = 0, len = as.length; j < len; j++) {
				as[j].className = "";
			}
			this.className = "active";
		}
	}
}
txt.onblur = function() { //搜索框失焦事件
		logo_form.className = "logo_f";
		logo_list.className = "logo_right_list";
		logo_goods.className = "logo_right_goods";
	}


//
var logo_left_list = document.getElementById("logo_left_list");
var ban_float = document.getElementById("ban_float");
var floatA = logo_left_list.getElementsByTagName("a");
ajax({
			method:"get",
			url:"../client/float.json",
			isAsyc:true,
			success:function(data){
				var arr = eval(data);
				createFloat(arr);
				eventFloat();
			},
			error:function(mes){
				alert(mes);
			}
			});
			function createFloat(arr){
				for(var i=0;i<arr.length;i++){
					var div = document.createElement("div");
					div.className="ban_float_main";
					ban_float.appendChild(div);
					for(var j=0;j<arr[i].length;j++){
						var dl = document.createElement("dl");
						div.appendChild(dl);
						dl.innerHTML='<dt>'+
														'<a href="'+arr[i][j].imgUrl+'">'+
															'<img src="'+arr[i][j].imgSrc+'" />'+
														'</a>'+
													'</dt>'+
													'<dd>'+
														'<a href="'+arr[i][j].imgUrl+'">'+arr[i][j].name+'</a>'+
														'<span>'+arr[i][j].price+'</span>'+
													'</dd>';
					}
				}
			}
			function eventFloat(){
				logo_left_list.onmouseenter = function(){
						ban_float.className = "ban_float active";
						ban_float.style.height = 0;
						animate(ban_float,{height:228},1);
						var f_main = document.querySelectorAll(".ban_float_main");
						for(var i=0;i<floatA.length-2;i++){
							floatA[i].index = i;
							floatA[i].onmouseenter = function(){
								//alert(f_main.length);
								for(var j=0;j<f_main.length;j++){
									f_main[j].className="ban_float_main";
								}
								f_main[this.index].className="ban_float_main active";
							}
						}
				}
				logo_left_list.onmouseleave= function(){
					ban_float.className = "ban_float";
				}
			}

	//侧边栏效果
var ban_left = document.getElementById("ban_left"); //侧边栏盒子
var menu = ban_left.getElementsByTagName("a"); //侧边栏列表项
var ban_right_box = document.getElementById("ban_right_box"); //装内容的盒子
var box_contents = document.getElementsByClassName("ban_box"); //右边对应的内容
ajax({
	method:"get",
	url:"../client/menu.json",
	isAsyc:true,
	success:function(data){
		var arr = eval(data);
		createMenu(arr);
		eventMenu();
	},
	error:function(mes){
		alert(mes);
	}
})
function createMenu(arr){
	//alert(arr.length)
	for(var i=0;i<arr.length;i++){
		var a = document.createElement("a");
		a.setAttribute("href",arr[i].pUrl);
		a.innerHTML = '<i>'+arr[i].pname+'</i><span>&gt;</span>';
		ban_left.appendChild(a);
		//alert(arr[0].value.length)
		var boxdiv = document.createElement("div");
		if(i==0){
			boxdiv.className="ban_box active";
		}else{
			boxdiv.className="ban_box";
		}
		ban_right_box.appendChild(boxdiv);
		for(var j=0;j<arr[i].value.length;j++){
			//alert(arr[0].value.length)
			var divItem = document.createElement("div");
			divItem.className="ban_box_item";
			boxdiv.appendChild(divItem);
			if(j>=6){
				ban_right_box.style.width = "530px";
			}else{
				ban_right_box.style.width = "265px";
			}
			if(arr[i].value[j].feature){
				divItem.innerHTML ='<a href="'+arr[i].value[j].imgUrl+'">'+
													'<span>'+
														'<img src="'+arr[i].value[j].imgSrc+'"/>'+
													'</span>'+
													'<i>'+arr[i].value[j].name+'</i>'+
													'<b>'+arr[i].value[j].feature+'</b>'+
												'</a>';
			}else{
				divItem.innerHTML ='<a href="'+arr[i].value[j].imgUrl+'">'+
													'<span>'+
														'<img src="'+arr[i].value[j].imgSrc+'"/>'+
													'</span>'+
													'<i>'+arr[i].value[j].name+'</i>'+
												'</a>';
			}
		}
	}
}
function eventMenu(){
	var menuA = document.querySelectorAll("#ban_left a");
	var rightBox = document.querySelectorAll(".ban_box");
	var currentIndex = 0;
	for(var i = 0;i<menuA.length;i++){
		menuA[i].index = i;
		menuA[i].onmouseenter = function(){
			currentIndex = this.index;
			for(var j = 0;j<menuA.length;j++){
				menuA[j].className="";
				rightBox[j].className="ban_box"
			}
			this.className="active";
			ban_right_box.className="ban_right_box active"
			rightBox[this.index].className="ban_box active";
		}
		rightBox[i].onmouseleave = function(){
			menuA[currentIndex].className="";
			ban_right_box.className = "ban_right_box";
		}
		menuA[i].onmouseleave = function(){
			menuA[currentIndex].className="";
			ban_right_box.className = "ban_right_box";
		}
	}
}





	//ample部分
var ample_right = document.getElementById("ample_right"); //右边的大盒子
function createAmple(arr) {
	for(var i = 0, len = arr.length; i < len; i++) {
		var sample_div = document.createElement("div");
		sample_div.className = "ample_img";
		sample_div.innerHTML = '<a href="' + arr[i].imgUrl + '">' +
			'<img src="' + arr[i].imgSrc + '" />' +
			'</a>';
		ample_right.appendChild(sample_div);
	}
}

function ampleEvent() {
	var sample_image = document.querySelectorAll(".ample_right .ample_img");
	ample_right.onmouseover = function(e) {
		e = e || window.event;
		var target = e.target || e.srcElement;
		if(target.nodeName.toLowerCase() == "div") {
			target.style.boxShadow = "0 10px 15px #eee";
		}
	}
	ample_right.onmouseout = function(e) {
		e = e || window.event;
		var target = e.target || e.srcElement;
		if(target.nodeName.toLowerCase() == "div") {
			target.style.boxShadow = 0;
		}
	}
}
ajax({
	method: "get",
	url: "../client/ample.json",
	isAsyc: true,
	success: function(data) {
		var arr = eval(data);
		createAmple(arr);
		ampleEvent();
	},
	error: function(mes) {
		alert(mes);
	}
});
/*-------------------hardware部分-----------------------------*/
var hardware_all = document.getElementById("hardware_all"); //查看全部的那一部分
hardware_all.onmouseenter = function() {
	hardware_all.className = "hardware_all active";
	//	animate(hardware_all,{opacity:0},10,function(){
	//		hardware_all.style.opacity = 1;
	//		
	//	});
}
hardware_all.onmouseleave = function() {
		hardware_all.className = "hardware_all";
	}
	//图片ajax
var hardware_right = document.getElementById("hardware_right"); //装所有dl的容器
var hardware_left = document.getElementById("hardware_left");
ajax({
	method: "get",
	url: "../client/hardware.json",
	isAsyc: true,
	success: function(data) {
		var arr = eval(data);
		createHardware(arr);
		eventHardware();
	},
	error: function(mes) {
		alert(mes);
	}
})

function createHardware(arr) {
	for(var i = 0, len = arr.length; i < len; i++) {
		if(i == 0) {
			var leftdiv = document.createElement("div");
			leftdiv.className="hardware_l";
			leftdiv.innerHTML = '<a href="'+arr[i].imgUrl+'">'+
							'<img src= "'+arr[i].imgSrc+'"/> '+
						'</a>';
			hardware_left.appendChild(leftdiv);
		} else {
			var hard_dl = document.createElement("dl");
			if(arr[i].type) {
				hard_dl.innerHTML = '<i id="hard_type">' + arr[i].type + '</i>' +
					'<dt><a href="' + arr[i].imgUrl + '"><img src="' + arr[i].imgSrc + '" /> </a></dt>' +
					'<dd>' +
					'<a href = "' + arr[i].imgUrl + '">' + arr[i].name + '</a>' +
					'<p>' + arr[i].desc + '</p>' +
					'<span>' + arr[i].price + '</span>' +
					'</dd>';
				hardware_right.appendChild(hard_dl);
				var hard_type = document.getElementById("hard_type");
				if(arr[i].type == "免邮费") {
					hard_type.style.backgroundColor = "#ffac13";
				}
			} else {
				hard_dl.innerHTML = '<dt><a href="' + arr[i].imgUrl + '"><img src="' + arr[i].imgSrc + '" /> </a></dt>' +
					'<dd>' +
					'<a href = "' + arr[i].imgUrl + '">' + arr[i].name + '</a>' +
					'<p>' + arr[i].desc + '</p>' +
					'<span>' + arr[i].price + '</span>' +
					'</dd>';
				hardware_right.appendChild(hard_dl);
			}
		}
	}
}

function eventHardware() {
	var hard_child= hardware_right.children;
	for(var i = 0;i<hard_child.length;i++){
		hard_child[i].index = i;
		hard_child[i].onmouseenter = function(){
			var that = this;
			animate(that,{top:-1},20,function(){
				hard_child[that.index].className = "active";
			});
		}
		hard_child[i].onmouseleave = function(){
			var that = this;
			animate(this,{top:0},20,function(){
				hard_child[that.index].className = "";
			});
		}
	}
	hardware_left.onmouseenter = function(){
			animate(this,{top:-1},20,function(){
				this.style.boxShadow = "0px 10px 10px rgba(0,0,0,.1)";
			});
		}
	hardware_left.onmouseleave = function(){
			animate(this,{top:0},20,function(){
				
			});
		}
//	hardware_right.onmouseover = function(e){
//		e = e||window.event;
//		var target = e.target||e.srcElement;
//		if(target.nodeName=="DT"){
//			animate(target.parentNode,{top:-1},20,function(){
//				target.parentNode.style.boxShadow = "0px 10px 10px rgba(0,0,0,.1)";
//			});
//		}
//	}
//	hardware_right.onmouseout = function(e){
//		e = e||window.event;
//		var target = e.target||e.srcElement;
//		if(target.nodeName=="DT"){
//			animate(target.parentNode,{top:0},20,function(){
//				target.parentNode.style.boxShadow = none;
//			});
//		}
//	}
}
/*---------match-----------*/
var match_left = document.getElementById("match_left");//左边盒子
var match_right = document.getElementById("match_right");//右边盒子
var ul_left = document.getElementById("ul_left");
ajax({
	method:"get",
	url:"../client/match.json",
	isAsyc:true,
	success:function(data){
		var arr = eval(data);
		createMatch(arr);
		eventMatch();
	},
	error:function(mes){
		alert(mes);
	}
})
function createMatch(arr){
		for(var i=0;i<arr.length;i++){
			if(i<2){
				var li_left = document.createElement("li");
				li_left.innerHTML = '<a href="'+arr[i].imgUrl+'">'+
										'<img src="'+arr[i].imgSrc+'" />'+
									'</a>';	
				ul_left.appendChild(li_left);
			}else{
				var match_ul = document.createElement("ul");
				if(i==2){
					match_ul.className="ul_right active";
				}else{
					match_ul.className = "ul_right";
				}
				match_right.appendChild(match_ul);
				for(var j=0;j<arr[i].length;j++){
					var li_right = document.createElement("li");
					//li_right.className="small_img special"
					if(j<=6){
						if(arr[i][j].type){
							if(arr[i][j].del_price){
								li_right.innerHTML = '<p class="li_small">'+arr[i][j].type+'</p>'+
											'<p class="li_img">'+
												'<a href="'+arr[i][j].imgUrl+'"><img src="'+arr[i][j].imgSrc+'"/></a>'+
											'</p>'+
											'<a href="'+arr[i][j].imgUrl+'" class="name">'+arr[i][j].name+'</a>'+
											'<h5><span>'+arr[i][j].price+'</span>&nbsp;<del>'+arr[i][j].del_price+'</del></h5>'+
											'<span class="li_comment">'+arr[i][j].num+'</span>'+
											'<p class="match_float">'+
												'<i>'+arr[i][j].com_content+'</i>'+
												'<span>来自于&nbsp;<b>'+arr[i][j].com_from+'</b>&nbsp;的评价</span>'+
											'</p>';
							}else{
								li_right.innerHTML = '<p class="li_small">'+arr[i][j].type+'</p>'+
											'<p class="li_img">'+
												'<a href="'+arr[i][j].imgUrl+'"><img src="'+arr[i][j].imgSrc+'"/></a>'+
											'</p>'+
											'<a href="'+arr[i][j].imgUrl+'" class="name">'+arr[i][j].name+'</a>'+
											'<h5><span>'+arr[i][j].price+'</span></h5>'+
											'<span class="li_comment">'+arr[i][j].num+'</span>'+
											'<p class="match_float">'+
												'<i>'+arr[i][j].com_content+'</i>'+
												'<span>来自于&nbsp;<b>'+arr[i][j].com_from+'</b>&nbsp;的评价</span>'+
											'</p>';
							}
						}else{
							if(arr[i][j].del_price){
								li_right.innerHTML = '<p class="li_img">'+
												'<a href="'+arr[i][j].imgUrl+'"><img src="'+arr[i][j].imgSrc+'"/></a>'+
											'</p>'+
											'<a href="'+arr[i][j].imgUrl+'" class="name">'+arr[i][j].name+'</a>'+
											'<h5><span>'+arr[i][j].price+'</span>&nbsp;<del>'+arr[i][j].del_price+'</del></h5>'+
											'<span class="li_comment">'+arr[i][j].num+'</span>'+
											'<p class="match_float">'+
												'<i>'+arr[i][j].com_content+'</i>'+
												'<span>来自于&nbsp;<b>'+arr[i][j].com_from+'</b>&nbsp;的评价</span>'+
											'</p>';
							}else{
								li_right.innerHTML = '<p class="li_img">'+
												'<a href="'+arr[i][j].imgUrl+'"><img src="'+arr[i][j].imgSrc+'"/></a>'+
											'</p>'+
											'<a href="'+arr[i][j].imgUrl+'" class="name">'+arr[i][j].name+'</a>'+
											'<h5><span>'+arr[i][j].price+'</span></h5>'+
											'<span class="li_comment">'+arr[i][j].num+'</span>'+
											'<p class="match_float">'+
												'<i>'+arr[i][j].com_content+'</i>'+
												'<span>来自于&nbsp;<b>'+arr[i][j].com_from+'</b>&nbsp;的评价</span>'+
											'</p>';
							}
						}
					}else if(j>6){
						if(j==7){
							li_right.className="small_img";
						}else{
							li_right.className="small_img special";
						}
						li_right.innerHTML = '<div class="s_word">'+
								'<p>'+arr[i][j].name+'</p>'+
								'<span>'+arr[i][j].price+'</span>'+
							'</div>'+
							'<div class="s_imgs">'+
								'<a href="'+arr[i][j].imgUrl+'">'+
									'<img src="'+arr[i][j].imgSrc+'"/>'+
								'</a>'
					}
					match_ul.appendChild(li_right);
				}
			}
		}	
	
					
}
var h3_li = document.querySelectorAll("#h3_ul li");
function eventMatch(){
	var  right_ul = document.querySelectorAll("#match_right .ul_right");
	for(var i = 0;i<h3_li.length;i++){
		h3_li[i].index = i;
		h3_li[i].onmouseenter = function(){
			for(var j = 0;j<h3_li.length;j++){
				h3_li[j].className="";
				right_ul[j].className="ul_right";
			}
			this.className="active";
			right_ul[this.index].className = "ul_right active";
		}
	}
	var ul_li = document.querySelectorAll(".ul_right.active li");
	var match_float = document.querySelectorAll(".ul_right.active li .match_float");
	var curIndex = 0;
	for(var i = 0;i<ul_li.length-2;i++){
		ul_li[i].index = i;
		ul_li[i].onmouseenter = function(){
			curIndex = this.index;
			animate(this,{top:-1},10,function(){
//				for(var j=0;j<ul_li.length;j++){
//					match_float[j].style.display = "none"
//				}
				ul_li[curIndex].className="active";
				match_float[curIndex].style.display="block";
				match_float[curIndex].style.height=0;
				animate(match_float[curIndex],{height:68},30);
			});
		}
		ul_li[i].onmouseleave = function(){
			curIndex = this.index;
			animate(this,{top:0},10,function(){
				ul_li[curIndex].className = "";
				match_float[curIndex].style.display="none";
			});
		}
	}
}
